<template>
    <view class="smart-page">
        <!--页面标题头begin-->
        <view class="smart-page-head">
            <view class="smart-page-head-title">video视频</view>
        </view>
        <!--页面标题头end-->
        <view>
            <video id="myVideo" src="/static/video/shipin.mp4"
                danmu-btn="true" enable-danmu="true" danmu-list="video_danmu_list"></video>
        </view>
        <view class="input_box">
            <input placeholder="评论内容..." v-model="inputValue">
        </view>
        <view class="btn_box">
            <button type="primary" @click="sendMsg">发送弹幕</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                inputValue: '', //输入框
                videoContext: '', //视频文字
                video_danmu_list: [{
                    text: '你好',
                    time: 1,
                    color: '#abc342'
                },
                {
                    text: '我很好，你好吗？',
                    time: 2,
                    color: '#ff5500'
                },
                {
                    text: '我也很好！',
                    time: 3,
                    color: '#0000ff'
                }]
            }
        },
        onReady: function() {
            this.videoContext = uni.createVideoContext('myVideo');
        },
        methods: {
            /*发送弹幕*/
            sendMsg() {
                console.log('弹幕内容: ' + this.inputValue);
                this.videoContext.sendDanmu({
                    text: this.inputValue,
                    color: 'red'
                });
            }
        }
    }
</script>

<style>
	.smart-page-head-title{
		    font-size: 48rpx;
		    color: #c0bab7;
		    opacity: 1;
		    /* 新增代码 */
		    text-align: center; /* 水平居中显示 */
		    text-decoration: underline; /* 添加下划线 */
			}
	.input_box{background-color: #CCC9CA;}
	.btn_box{margin-top: 20upx;}
</style>